<template>
  <view class="test">
    <view style="text-align: center;">
      选中值：{{ selectData }}
    </view>
    <view class="content">
      <input class="input" type="text" :value="value" placeholder="请输入内容" @input="input">
      <fuzzy-list
        label-name="name"
        value-name="id"
        align="center"
        no-data="没有了,气不气？"
        :show="show"
        :list="list"
        :custom-style="{ fontSize: '30rpx' }"
        @scrolltolower="scrolltolower"
        @select="select"
      />
    </view>
  </view>
</template>

<script>
  import FuzzyList from './wk-lianxiang-zujian';
  import debounce from './debounce.js'; // 防抖函数
  import { httpGetList } from './api.js';
  export default {
    components: {
      FuzzyList
    },
    data() {
      return {
        queryParams: {
          pageSize: 10,
          pageNum: 1
        },
        value: '',
        show: false,
        list: [],
        selectData: null
      };
    },
    methods: {
      input(event) {
        this.value = event.target.value;
        this.queryParams.pageNum = 1;
        debounce(this.getList, 500);
      },

      scrolltolower() {
        this.queryParams.pageNum++;
        this.getList();
      },

      getList() {
        const { queryParams, value } = this;
        /** 输入框内有值就进行搜索，没有值就关闭 */
        if (value) {
          httpGetList({ ...queryParams, keyword: value }).then(resp => {
            if (resp.code === 200) {
              this.list = resp.data;
              if (!this.show) this.show = true;
            }
          });
        } else {
          this.show = false;
        }
      },

      select(event) {
        this.show = false;
        this.value = event.name;
        this.selectData = JSON.stringify(event);
      }
    }
  };
</script>

<style lang="scss" scoped>
.test {
	width: 100vw;
	min-height: 100vh;
	height: 100%;
	padding-top: 300rpx;
}
.content {
	width: 600rpx;
	margin: 0 auto;
	position: relative;

	.input {
		padding: 12rpx;
		background-color: #f5f5f5;
	}
}
</style>
